<!-- <template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
</template>
<script>
</script>
<style scoped>
</style> --> 

<!--demo4-2-->
<!-- <template>
  <div>
    <NumberCom/>
  <NumberCom/>
  </div>
</template>
<script>
import NumberCom from "./components/NumberCom.vue"
export default{
  components:{
    NumberCom
  }
};
</script>
<style scoped>
</style> -->
<!-- <template>
  <div>
    <Hellocom name="Jim"></Hellocom>
    <Hellocom name="Lily"></Hellocom>
    <Hellocom name="Bob"></Hellocom>
  </div>
</template>

<script>
import Hellocom from './components/hellocom.vue';

export default {
  components: {
    Hellocom,
  },
};
</script>

<style scoped>

</style> -->
<!-- <template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1">ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2">ActiveCom2
    <keep-alive>
      <component :is="activeComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
import ActiveCom1 from "./components/ActiveCom1.vue";
import ActiveCom2 from "./components/ActiveCom2.vue";
export default {
  data() {
    return {
      activeComponent: "ActiveCom2",
    };
  },
  // 注册组件
  components: {
    ActiveCom1,
    ActiveCom2,
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyneCom></AsyneCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>
<script>
import {defineAsyneComponent} from'vue'
//定义一个异步组件AsyneCom
const AsyncCom=defineAsyncComponent(
  ()=>import("./components/HelloCom1.vue")
)
export default{
  components:{
    AsyncCom
  }
}
</script>
<style scoped>
</style> -->

<!-- <template >
  <div>
    <button @click="currentTab='Tab1'">音乐</button>
    <button @click="currentTab='Tab2'">视频</button>
    <button @click="currentTab='Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";


export default {
  data() {
    return {
      currentTab:"Tab1",
    };
  },
  components:{
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>
<style scoped>
  
</style> -->

<!-- <template>
    <div>
        <ChildCom msg="Hello,I am dad!"></ChildCom>
    </div>
</template>
<script>
import ChildCom from"./components/ChildCom.vue"
export default{
  components:{
    ChildCom
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
    <div>
        <ChildCom1 :name="name" :age="age"></ChildCom1>
    </div>
</template>
<script>
import ChildCom1 from"./components/ChildCom1.vue"
export default{
  data(){
    return{
      name:'Jim',//姓名
      age:[],//年龄
      gender:'',//性别
      hpbby:[]//爱好
    }
  },
  components:{
    ChildCom1
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
  <div>
    <mycom1 :parentMsg="msg"></mycom1>
  </div>
</template>
<script>
import mycom1 from "./components/Mycom1.vue"
export default{
  data(){
    return{
      msg:'父组件的msg'
    }
  },
  components:{
    mycom1
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
  <div>
    <mycom2 :childWidth="width"></mycom2>
  </div>
</template>
<script>
import mycom2 from"./components/MyCom2.vue"
export default{
  data(){
    return{
      width:400
    }
  },
  components:{
    mycom2
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
  <div>
    <ChildCom @score="scoreHandler"></ChildCom>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom3.vue";
export default{
  components:{
    ChildCom
  },
  methods:{
    scoreHandler(argl,arg2){
      console.log(arg1,arg2);
    }
  }
};
</script>
<style scoped>
</style> -->

<!-- <template>
  <div>
    <ChildCom ref="childRef"></ChildCom>
    <button @click="sendMessage">Send Message To Child</button>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom4.vue";
export default{
  components:{
    ChildCom
  },
  methods:{
    sendMessage(){
      this.$refs.childRef.receiveMessage('Hello from parent');
    }
  }
};
</script> -->

<!-- <template>
  <div>
    <ChildCom v-model="msg">{{ msg }}</ChildCom>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom5.vue"
export default{
  data(){
    return{
      msg:''
    }
  },
  components:{
    ChildCom
  }
};
</script>
<style>
</style> -->

<template>
  <div>
    <ChildCom6></ChildCom6>
  </div>
</template>
<script>

import ChildCom from"./components/ChildCom6.vue";
export default{
  components:{
    ChildCom
  },
  provide:{
    message:'Hello from parent'
  }
};
</script>